<template>
	<view class="">
		<view class="header" v-if="userInfo.BeijingT">
			<view class="header-mask"></view>
			<image :src="userInfo.BeijingT" mode="aspectFill"></image>
		</view>
		<view class="" :style="{height:winInfo.height+'px',paddingTop:winInfo.top+ 100+'px'}">
			<view class=" displayFlexSpaceBetween" style="margin:0 30rpx;">
				<!-- 头像 -->
				<view class="HeadBox">
					<image :src="userInfo.Avatar || '/static/images/my/noAvatar.svg'" class="user-avatar"
						mode="aspectFill"></image>
				</view>
				<view class="">
					<view class="attention" @tap="attentionTap()" v-show="attentionShow">
						<text
							:class="attentionIndex==true?'attention-red':'attention-gray' ">{{attentionIndex==true?'关注':'已关注' }}</text>
					</view>
					<!-- 计数统计 -->
					<view style="padding-top: 60rpx;" class="count displayFlexCenter"
						:style="{ margin: Islogin ? 'auto' : '0 20rpx' }">
						<view class="count-box" @tap="Tuijian(1)">
							<view>{{ computeNum(userInfo.fansCount) || 0 }}</view>
							<view class="count-title">积分</view>
						</view>
						<view class="count-box" @tap="Tuijian(1)">
							<view>{{ computeNum(userInfo.fansCount) || 0 }}</view>
							<view class="count-title">粉丝</view>
						</view>
						<view class="count-box" @tap="Tuijian(2)">
							<view>{{ computeNum(userInfo.GuanzhuCount) || 0 }}</view>
							<view class="count-title">关注</view>
						</view>
						<view class="count-box" @tap="Tuijian(3)">
							<view>{{ computeNum(userInfo.RenmaiCount) || 0 }}</view>
							<view class="count-title">获赞与收藏</view>
						</view>
					</view>
				</view>
			</view>
			<view class="loginBox displayFlexSpaceBetween" style="">
				<view class="loginBox-left">
					<view class="displayFlex" style="margin-bottom: 15rpx;">
						<view class="loginBox-left-text " @tap="toLogin">{{ userInfo.Name || '点击登录' }}</view>
						<image src="/static/images/my/icon-女@2x.png"
							v-if="!userInfo.ShifouYCXB && userInfo.Sex && userInfo.Sex == '女'"></image>
						<image src="/static/images/my/icon-男@2x.png"
							v-if="!userInfo.ShifouYCXB && userInfo.Sex && userInfo.Sex == '男'"></image>
					</view>
					<text>写一个有趣的介绍......</text>
				</view>
				<view class="displayFlex">
					<view class="loginBox-right" @tap="editInfo" v-if="Islogin">
						编辑
					</view>
					<view class="loginBox-edit" @tap="openLeftpopup()" v-if="Islogin">
						<tui-icon name="setup" color="#FB353B" size="20"></tui-icon>
					</view>
				</view>
			</view>
			<view class="whiteBox" style="margin-bottom: -10rpx;">
				<image src="/static/images/my/白色背景@2x.png" mode=""></image>
			</view>
			<view class="" style="background-color: #fff;padding: 0 30rpx; margin-top: -10rpx;"
				v-if="Islogin && userInfo.Jineng && userInfo.Jineng != 'null' && JSON.parse(userInfo.Jineng).length">
				<view class="labelBox displayFlex">
					<view class="" v-for="(item,index) in JSON.parse(userInfo.Jineng)" :key="index">
						{{item}}
					</view>
				</view>
				<view class="applyBox displayFlexSpaceBetween">
					<view class="applyBox-box" @tap="applyTap(item)" v-for="(item,index) in applyList" :key="index">
						<image :src="item.img" mode=""></image>
						<view class="">
							{{item.text}}
						</view>
					</view>
				</view>
			</view>

			<view class="">

				<view class="sticky-header" ref="stickyRef">
					<view class="" :class="{ 'sticky-header scroll-bottom': isScrollBottom }">

					</view>
					<tui-tabs class="tui-tabs" v-if="!fixTabsShow" :tabs="tabs" color="#000" itemWidth="33%"
						sliderBgColor="#FB353B" selectedColor="#FB353B" :currentTab="currentTab"
						style="margin: -10rpx 0;" @change="changeTab"></tui-tabs>
				</view>
				<view class="noData" v-if="!Islogin" @tap="toLogin">
					<image src="/static/images/my/发布文章@2x.png"></image>
					<view>发布文章 赚积分 兑好礼</view>
					<view>分享经历、有趣故事</view>
					<image :src="Microi.FileServer +TupianPicture_1"></image>

				</view>
				<!-- 笔记 -->
				<view v-else-if="currentTab == 1" class="scroll-view">
					<!-- 	<view class="content" style="background-color: #fff;height: 100vh;padding-left: 10rpx;">
						<waterfall :group="2" :list="WZInfo.Data" :pageSize="5"></waterfall>
					</view> -->
					<!-- <mescroll-body ref="mescrollRef" @init="mescrollInit" @down="downCallback"> -->
					<view class="" v-if="WZInfo.Data&& WZInfo.Data.length">
						<MasonryWZ :initial-data="WZInfo.Data" @item-click="onItemClick"></MasonryWZ>
					</view>

					<view v-else class="no-Data">
						<image src="/static/images/my/发布文章@2x.png" mode="widthFix"></image>
						<view class="">发布文章 赚积分 兑好礼C</view>
						<view class="">分享经历、有趣故事</view>
					</view>


				</view>
				<!-- 活动 -->
				<view v-else-if="currentTab == 0" class="scroll-view">
					<view class="activityBox" style="">
						<view class="activityBox-background">
							<image :src="Microi.FileServer +TupianPicture_2" mode=""></image>
						</view>
						<view class="activityBox-Group" @tap="publish()">
							<image src="/static/images/my/Group 783@2x.png" mode=""></image>
							<view class="" style="margin: 16rpx 0 25rpx;">
								本地草稿
							</view>
							<view class=" displayFlex">
								有一篇活动待发布 <image src="/static/images/my/icon-右箭头@2x.png" mode=""></image>
							</view>
						</view>
						<view class="activityBox-Box" @tap="activityTap(item)" v-for="(item,index) in HDInfo.Data"
							:key="index" v-if="HDInfo.Data&& HDInfo.Data.length">
							<view class="displayFlexSpaceBetween">
								<view class="activityBox-Box-left">
									{{ item.Biaoti }}
								</view>
								<!-- 浏览记录 -->
								<!-- <view class="activityBox-Box-right displayFlex">
									<image src="/static/images/my/眼睛@2x.png" mode=""></image>
									<text>10</text>
								</view> -->
							</view>
							<view class="activityBox-Box-header displayFlex">
								<image :src="item.Avatar || '/static/images/my/noAvatar.svg'" mode="aspectFill"
									class="avatar-img"></image>
								<view style="margin: 0 20rpx;">{{ item.Name || '暂无昵称' }}</view>
							</view>
							<view class="activityBox-Box-apply displayFlex">
								<text class="">
									{{ computeHDType(item) }}
								</text>
								<view>{{ computeHDTime(item.HuodongSJ) }}</view>
								<text>|</text>
								<view>{{ item.XiangxiDZ }}</view>
							</view>
							<scroll-view :scroll-x="true" :scroll-y="false" class="scrollAll ">
								<div class="displayFlex">
									<div class="scrollAll-category" v-for="(val,valIndex) in JSON.parse(item.TupianMS)"
										:key="valIndex">
										<image :src="Microi.FileServer + val.Path" mode=""></image>
									</div>
								</div>
							</scroll-view>
							<scroll-view :scroll-x="true" :scroll-y="false" class="scrollheader ">
								<div class="displayFlex">
									<div class="scrollheader-category" v-for="(val,valIndex) in item.joinUser"
										:key="valIndex">
										<image :src="Microi.FileServer + val.Avatar || '/static/images/my/noAvatar.svg'"
											mode="aspectFill"></image>
									</div>
								</div>
							</scroll-view>
						</view>
						<view v-else class="no-Data">
							<image src="/static/images/my/发布文章@2x.png" mode="widthFix"></image>
							<view class="">发布文章 赚积分 兑好礼</view>
							<view class="">分享经历、有趣故事</view>
						</view>
					</view>

				</view>
				<view v-else-if="currentTab == 2" class="scroll-view" style="background-color: #F7F7F7;">
					<view class="label ">
						<view @tap="selectIndex(item,index)" class="label-item" v-for="(item,index) in typeList"
							:key="index">
							<view :style="currIndex==index?'font-weight: 800;color: #FB353B;':''">
								{{item}}
								<text v-if="item=='点赞'">{{dianzanCount}}</text>
								<text v-if="item=='收藏'">{{shoucangCount}}</text>
							</view>
						</view>
					</view>

					<view class="">
						<MasonryDZ :initial-data="DZInfo.Data" @item-click="onItemClick1"
							v-if="DZInfo.Data&& DZInfo.Data.length"></MasonryDZ>

						<view v-else class="no-Data">
							<image src="/static/images/my/发布文章@2x.png" mode="widthFix"></image>
							<view class="">发布文章 赚积分 兑好礼</view>
							<view class="">分享经历、有趣故事</view>
						</view>
					</view>
				</view>
			</view>
			<!-- 左边弹窗 -->
			<tui-drawer mode="left" :visible="leftPopup" @close="closePopup">
				<view class="popup-info" :style="{paddingTop:winInfo.top+ 0+'px'}">
					<image src="/static/images/find/xiala.png" class="popup-logo" @tap="closePopup"></image>
					<view class="popup-box" @tap="toFeedBack">
						<image src="/static/images/my/edit-pane.png" mode=""></image>
						<view>意见反馈</view>
					</view>
					<view class="popup-box" @tap="changeAccount">
						<image src="/static/images/my/change.png" mode=""></image>
						<view>切换账号</view>
					</view>
					<view class="popup-box" @tap="loginOut">
						<image src="/static/images/my/back.png" mode=""></image>
						<view>退出登录</view>
					</view>
				</view>
			</tui-drawer>

		</view>
		<!-- 完善名片 -->
		<tui-modal :show="PingPTipsModel" position="flex-end" padding="0" custom>
			<view class="MingPian-tips-model">
				<view>完善个人电子名片，解锁更多人脉</view>
				<view class="wanS-btn" @tap="editInfo">前往完成</view>
			</view>
		</tui-modal>
	</view>

	<!-- 导航栏 -->
	<tabbar currentTab="4" />
</template>

<script>
	import tabbar from '/model/tabbar.vue';
	import waterfall from '@/components/lj-waterfall/lj-waterfall.vue'
	import MasonryWZ from '@/components/MasonryWZ.vue'
	import MasonryDZ from '@/components/masonryDZ.vue'
	import MescrollMixin from '@/components/mescroll-uni/mescroll-mixins.js'
	export default {
		mixins: [MescrollMixin],
		components: {
			tabbar,
			waterfall,
			MasonryWZ,
			MasonryDZ,
		},
		data() {
			return {
				CurrentUser: this.Microi.GetCurrentUser(),
				Islogin: this.Microi.IsLogin(),
				PingPTipsModel: false,
				leftPopup: false,
				isScrollBottom: false,
				fixTabsShow: false,
				currentTab: 0,
				attentionIndex: true,
				attentionShow: false,
				TupianPicture_1: '',
				TupianPicture_2: '',
				PageSize: 5,
				PageIndex: 1,
				stickyTop: 0, // 吸顶元素原本距离页面顶部的距离
				initialItems: [], // 可以在这里设置初始数据
				typeList: ['点赞', '收藏'],
				currIndex: 0,
				currItemCaozuo: '',
				dianzanCount: '',
				shoucangCount: '',
				isLoading: false, // 新增：标记是否正在请求
				WZInfo: {
					page: 1,
					noData: false,
					Data: []
				},
				HDInfo: {
					page: 1,
					noData: false,
					Data: []
				},
				DZInfo: {
					page: 1,
					noData: false,
					Data: []
				},
				winInfo: {
					height: 64, //header高度
					top: 26, //标题图标距离顶部距离
					scrollH: 0 //滚动总高度
				},
				userInfo: {},
				// 礼包服务数据

				tabs: [{
						// name: '文章',
						name: '活动',
					},
					{

						name: '文章'

					},

					{
						name: '赞与收藏',

					}
				],
				applyList: [{
						img: '/static/images/my/icon-我的预约@2x.png',
						text: '我的预约'
					},
					{
						img: '/static/images/my/icon-沙粒@2x.png',
						text: '预约处理'
					},
					{
						img: '/static/images/my/icon-沙粒商城@2x.png',
						text: '浏览记录'
					},
					{
						img: '/static/images/my/icon-沙粒商城@2x (1).png',
						text: '积分'
					},

				]
			}
		},
		mounted() {
			let obj = {};
			// #ifdef MP-WEIXIN
			obj = wx.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-BAIDU
			obj = swan.getMenuButtonBoundingClientRect();
			// #endif
			// #ifdef MP-ALIPAY
			my.hideAddToDesktopMenu();
			// #endif
			setTimeout(() => {
				uni.getSystemInfo({
					success: (res) => {
						this.winInfo = res;
						this.winInfo.width = obj.left || res.windowWidth;
						this.winInfo.height = obj.top ? obj.top + obj.height + 8 : res
							.statusBarHeight + 44;
						this.winInfo.top = obj.top ? obj.top + (obj.height - 32) / 2 : res
							.statusBarHeight + 6;
						this.winInfo.scrollH = res.windowWidth;
					}
				});
			}, 0);
		},

		onHide() {
			if (this.Islogin) {
				const pages = getCurrentPages();
				const currentPage = pages[pages.length - 1];
				const route = currentPage.route;
				const options = currentPage.options;
				this.Microi.ApiEngine.Run('Add_liulanLog', {
					YemianCS: options,
					YemianDZ: route,
					LiulanSJC: new Date().getTime() - this.startTime.getTime()
				});
			}
		},
		onUnload() {
			if (this.Islogin) {
				const pages = getCurrentPages();
				const currentPage = pages[pages.length - 1];
				const route = currentPage.route;
				const options = currentPage.options;
				this.Microi.ApiEngine.Run('Add_liulanLog', {
					YemianCS: options,
					YemianDZ: route,
					LiulanSJC: new Date().getTime() - this.startTime.getTime()
				});
			}
		},

		onLoad() {
			this.getHDList();
			this.currentTab = 0


		},
		onShow() {
			this.startTime = new Date();
			this.getPicture()
			if (this.Islogin) {
				this.getUserInfo();
			} else {
				this.get_morenBGC();
			}
		},
		// onReady() {
		// 	 const stickyEl = this.$refs.stickyRef?.$el;
		// 	  if (stickyEl) {
		// 	    const rect = stickyEl.getBoundingClientRect();
		// 	    this.stickyTop = rect.top;
		// 	    console.log('吸顶元素初始位置:', this.stickyTop);
		// 	  }
		// },
		onPageScroll(e) {
			// 	//   // 先判断元素是否存在，避免undefined错误
			// 	const stickyEl = this.$refs.stickyRef;
			// 	if (!stickyEl) return;

			// 	if (e.scrollTop >= this.stickyTop) {
			// 		stickyEl.style.position = 'fixed';
			// 		stickyEl.style.top = '0';
			// 		stickyEl.style.width = '100%'; // 补充宽度，避免内容溢出
			// 		stickyEl.style.zIndex = '99'; // 增加层级，防止被覆盖
			// 		stickyEl.style.backgroundColor = '#fff'; // 增加背景色避免内容穿透
			// 	} else {
			// 		// 恢复默认样式
			// 		stickyEl.style.position = '';
			// 		stickyEl.style.top = '';
			// 		stickyEl.style.width = '';
			// 		stickyEl.style.zIndex = '';
			// 	}
			this.isScrollBottom = e.scrollTop > 450;
			console.log("当前滚动位置：" + this.isScrollBottom);
		},
		methods: {


			//获取笔记数据
			async getWenzhangData() {
				let self = this
				if (this.isLoading) return; // 若正在请求，直接返回
				this.isLoading = true; // 开始请求，标记为true
				uni.showLoading({
					title: '加载中~',
					mask: true
				});
				try {
					let res = await this.Microi.FormEngine.GetTableData({
						FormEngineKey: 'diy_Biji',
						_PageSize: this.PageSize, //每页多少条数据5
						_PageIndex: this.PageIndex //第几页数据，从1开始索引
					})
					if (res.Code == 1) {
						self.WZInfo.Data = res.Data;
						console.log('笔记diy_Biji:', self.WZInfo.Data);
						let ShipinFM = self.Microi.FileServer + self.WZInfo.Data[0].ShipinFM.Path
						return
					}
				} catch (err) {
					console.error('请求失败', err);
				} finally {
					uni.hideLoading();
					this.isLoading = false; // 请求结束，重置标志位
				}
			},

			/* 活动列表 */
			async getHDList() {
				var self = this;
				var res = await self.Microi.ApiEngine.Run('huodong_List', {
					page: self.HDInfo.page,
					searchInfo: self.searchInfo
				});
				if (self.HDInfo.page == 1) {
					self.HDInfo.Data = res.Data;
					// console.log('活动列表：', self.HDInfo.Data);
				} else {
					self.HDInfo.Data.push(...res.Data);
				}
				if (!res.Data.length) {
					self.HDInfo.noData = true;
				}
				self.HDInfo.page++;
			},
			computeHDType(item) {
				var HuodongSJ = new Date(item.BaomingJZSJ).getTime();
				var TimeNow = new Date().getTime();
				var baomingCount = item.baomingCount;
				var CanyuRS = item.CanyuRS;
				if (HuodongSJ > TimeNow && baomingCount < CanyuRS) {
					return '报名中';
				} else if (HuodongSJ > TimeNow && baomingCount >= CanyuRS) {
					return '已满员';
				} else if (HuodongSJ <= TimeNow) {
					return '已结束';
				}
			},
			computeHDTime(DataInfo) {
				var time = new Date(DataInfo);
				var year = time.getFullYear();
				var month = time.getMonth() + 1;
				if (month < 10) month = `0${month}`;
				var day = time.getDate();
				if (day < 10) day = `0${day}`;
				var xingqi = time.getDay();
				var XingqiArray = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				xingqi = XingqiArray[xingqi];

				return `${year == new Date().getFullYear() ? '' : year} ${month}月${day}日 ${xingqi} ${DataInfo.split(' ')[1]}`;
			},
			computeNum(num) {
				num = num * 1;
				if (num > 10000) {
					return num / 10000 + 'w+';
				} else if (num > 1000) {
					return num / 1000 + 'k+';
				} else {
					return num;
				}
			},
			computeHDYear(DataInfo) {
				var time = new Date(DataInfo);
				var year = time.getFullYear();
				var month = time.getMonth() + 1;
				if (month < 10) month = `${month}`;
				var day = time.getDate();
				if (day < 10) day = `${day}`;
				var xingqi = time.getDay();
				var XingqiArray = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
				xingqi = XingqiArray[xingqi];

				return `${year == new Date().getFullYear() ? '' : year} ${year}-${month}-${day} `;
			},
			waterfall(e) {
				console.log('点击图片：', e);
			},

			changeTab(e) {
				this.scrollH = 0;
				this.currentTab = e.index;
				if (this.currentTab == 1) {
					this.getWenzhangData()
				}
				if (this.currentTab == 2) {
					this.selectIndex('点赞', 0)
				}

			},

			async getUserInfo() {
				var self = this;
				var res = await self.Microi.ApiEngine.Run('get_UserInfo', {
					YonghuID: self.CurrentUser?.Id
				});
				if (res.Code != 1) {
					self.Microi.Logout();
					return;
				}
				self.userInfo = res.Data;
				console.log('self.userInfo：', self.userInfo);
				if (self.userInfo.RenzhengZT != '已认证' && self.Islogin) {
					self.PingPTipsModel = true;
				}
				if (!this.userInfo.BeijingT) {
					this.get_morenBGC();
				}
				// this.getPingList();
			},
			async getPicture() {
				var self = this;
				let res = await self.Microi.FormEngine.GetTableData({
					FormEngineKey: 'diy_picture',
				})
				if (res.Data == 0 || res.Data.length === 0) {
					self.Microi.Tips('暂无相关数据')
					return
				}
				if (res.Code === 1) {
					let publishBtnImage = null;
					let draftBoxImage = null;
					for (let i = 0; i < res.Data.length; i++) {
						const currentItem = res.Data[i];
						if (currentItem.Biaoti === '去发布按钮') {
							publishBtnImage = currentItem.Tupian;
						} else if (currentItem.Biaoti === '草稿箱') {
							draftBoxImage = currentItem.Tupian;
						}
					}
					self.TupianPicture_1 = publishBtnImage;
					self.TupianPicture_2 = draftBoxImage;
					console.log('diy_picture: ', self.TupianPicture_2);
				}

			},
			openLeftpopup() {
				var self = this;
				if (self.Islogin) {
					self.leftPopup = true;
				} else {
					self.Microi.Tips('请先登录～', false);
				}
			},
			// 背景图
			async get_morenBGC() {
				var self = this;
				var res = await self.Microi.ApiEngine.Run('customize_crud', {
					EngineKey: 'KEY000007'
				});
				this.userInfo.BeijingT = this.Microi.FileServer + res.Data;
			},
			Tuijian(index) {
				uni.navigateTo({
					url: '/pages/my/TuijianMe/TuijianMe?Tab=' + index
				});
			},
			activityTap(item) {

				uni.navigateTo({
					url: '/packageA/activityDetail/activityDetail?Id=' + item.Id
				});
				// console.log('item：',item.Biaoti,item.Id);
			},
			editInfo() {
				this.PingPTipsModel = false;
				uni.navigateTo({
					url: '/pages/my/edit/edit'
				});
			},
			applyTap(item) {
				let self = this
				if (item.text == '我的预约') {
					uni.navigateTo({
						url: '/packageA/MyAppointment/MyAppointment'
					});
				} else if (item.text == '预约处理') {
					self.Microi.Tips('暂未开发～');
					uni.navigateTo({
						url: '/packageA/MyAppointment/processing'

					});

				} else if (item.text == '浏览记录') {
					self.Microi.Tips('暂未开发～');
					uni.navigateTo({
						url: '/packageA/MyAppointment/browsingHistory'
					});
				} else if (item.text == '积分') {
					self.Microi.Tips('暂未开发～');
					uni.navigateTo({
						url: '/packageA/MyAppointment/MyIntegral'
					});
				}

				console.log(item.text);
			},
			toLogin() {
				uni.navigateTo({
					url: '/pages/common/login/login'
				});
			},
			closePopup() {
				this.leftPopup = false;
			},
			toFeedBack() {
				uni.navigateTo({
					url: '/pages/my/feedBack/feedBack'
				});
			},
			changeAccount() {
				this.Microi.RouterPush('/pages/my/changeUser/changeUser', true);
			},
			loginOut() {
				this.Microi.Logout();
				this.Islogin = this.Microi.IsLogin();
				this.userInfo = {};
				this.closePopup();
			},
			publish() {
				uni.navigateTo({
					url: '/pages/my/huodong/HDfabu?currentTab=' + this.currentTab
				});
			},
			/* 
			  选择标签
			 */
			selectIndex(item, index) {

				this.currIndex = index;
				this.currItemCaozuo = item;
				if (this.currIndex != index) {
					this.currIndex = index
				}
				// this.PageIndex = 1; // 重置页码
				// this.DZInfo.Data = []; // 清空旧数据
				this.getMySCdz()
				console.log('currIndex:', this.currItemCaozuo);

			},

			async getMySCdz() {
				let self = this
				if (this.isLoading) return; // 若正在请求，直接返回
				this.isLoading = true; // 开始请求，标记为true
				uni.showLoading({
					title: '加载中~',
					mask: true
				});
				try {
					var res = await self.Microi.ApiEngine.Run('my_ShouCang_DZ', {
						YonghuID: self.CurrentUser.Id,
						page: self.PageIndex,
						Caozuo: this.currItemCaozuo
					});
					this.dianzanCount = res.Count[0].num || 0;
					this.shoucangCount = res.Count[1].num || 0;
					this.DZInfo.Data = res.Data; // 更新数据
				} catch (err) {
					console.error('请求失败', err);
				} finally {
					uni.hideLoading();
					this.isLoading = false; // 请求结束，重置标志位
				}
			},
			onItemClick(item) {
				if (item.Shipin) {
					uni.navigateTo({
						url: '/pages/my/Biji/shipin?Id=' + item.Id
					});
				} else {
					uni.navigateTo({
						url: '/pages/my/Biji/tuwen?Id=' + item.Id
					});
				}
				// 处理点击事件，如查看详情等
			},

			onItemClick1(item) {
				if (item.Shipin) {
					uni.navigateTo({
						url: '/pages/my/Biji/shipin?Id=' + item.InfoId
					});
				} else {
					uni.navigateTo({
						url: '/pages/my/Biji/tuwen?Id=' + item.InfoId
					});
				}
				console.log("onItemClick1:", e);
			},
			attentionTap() {

				this.attentionIndex = !this.attentionIndex
				console.log('关注');
			}
		}
	}
</script>

<style lang="scss">
	// page {
	// 	background: #FFF;
	// }
	.sticky-header {
		position: -webkit-sticky;
		position: sticky;
		top: 0;
		/* 吸顶 */
		// padding: 150rpx 0 0 0;
		// padding: 30rpx 0 0 0;
		z-index: 10;
		background-color: white;
		margin-top: -10rpx;
		/* 根据需要设置背景色 */
	}

	.header {
		position: fixed;
		width: 100vw;
		height: 902rpx;
		z-index: -1;
		border-radius: 78rpx;

		image {
			width: 100%;
			height: 100%;
			z-index: -2;
		}

		&-mask {
			position: absolute;
			top: 0;
			left: 0;
			width: 100vw;
			height: 902rpx;
			background: linear-gradient(133deg, #3d3d3d 40%, #ffffff 100%);
			opacity: 0.5;
		}

		image {
			width: 100%;
			height: 100%;
			z-index: -2;
		}
	}

	.HeadBox {
		image {
			width: 178rpx;
			height: 178rpx;
			border-radius: 50%;
		}

		margin-right: 80rpx;
	}

	.scroll-bottom {
		padding: 80rpx 0;
		background-color: #FFF;
	}

	.attention {
		text-align: right;
		// margin-bottom: 50rpx;

		text {
			padding: 5rpx 25rpx;
			border-radius: 77rpx;
			font-weight: 500;
			font-size: 26rpx;
		}

		&-red {
			background: #FB353B;
			color: #FFF;
		}

		&-gray {
			background: #f4f5f6;
			color: #666;
		}

	}

	.scroll-view {
		width: 100%;
		background-color: #F6F6F6;
		height: 100%;
		z-index: 1;
	}

	.activityBox {
		padding: 20rpx;

		// padding-left: 10rpx;

		&-background {
			width: 95vw;
			position: absolute;

			image {
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				border: 1rpx solid #EDEDED;
				width: 100%;
				height: 334rpx;
				// background-color: #EA3325;
			}
		}

		&-Group {
			position: relative;
			width: 100%;
			height: 334rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			background-color: rgba(#000, 0.5);
			border-radius: 16rpx 16rpx 16rpx 16rpx;

			image {
				width: 96rpx;
				height: 96rpx;
			}

			view {
				font-weight: 400;
				font-size: 26rpx;
				color: #FFFFFF;

				image {
					margin-left: 16rpx;
					width: 30rpx;
					height: 30rpx;
				}
			}

		}

		&-Box {
			margin-top: 16rpx;
			padding: 25rpx;
			background: #FFFFFF;
			// background-color: blanchedalmond;
			border-radius: 16rpx;

			&-left {
				font-weight: 800;
				font-size: 36rpx;
				color: #333333;
			}

			&-right {
				image {
					width: 36rpx;
					height: 36rpx;
				}

				font-weight: 400;
				font-size: 26rpx;
				color: #444444;
			}

			&-header {
				margin: 20rpx 0;

				image {
					width: 44rpx;
					height: 44rpx;
					border-radius: 50%;
				}

				text:nth-of-type(1) {
					font-weight: 800;
					font-size: 26rpx;
					margin: 0 15rpx;
					background: linear-gradient(to right, red, blue);
					-webkit-background-clip: text;
					background-clip: text;
					color: transparent;
				}

				text:nth-of-type(2) {
					font-weight: 800;
					font-size: 26rpx;
					color: #FF7F83;
				}
			}

			&-apply {
				font-weight: 500;
				font-size: 24rpx;
				color: #212121;

				text:nth-of-type(1) {
					font-weight: 500;
					font-size: 24rpx;
					color: #FB353B;
					padding: 4rpx 8rpx;
					background: #FFE9E9;
					border-radius: 6rpx;
				}

				text {
					margin: 0 15rpx;
				}
			}
		}
	}

	.scrollAll {

		&-category {
			text-align: center;
			margin: 20rpx 5rpx;

			// padding: 10rpx 30rpx;
			image {
				border-radius: 5rpx;
				width: 214rpx;
				height: 212rpx;
			}
		}
	}

	.scrollheader {

		&-category {
			text-align: center;
			margin: 0 5rpx;

			// padding: 10rpx 30rpx;
			image {
				border-radius: 50%;
				width: 58rpx;
				height: 58rpx;
			}
		}
	}

	.count {
		gap: 40rpx;
		/* gap: 112rpx; */
		width: 100%;

		&-box {
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			gap: 12rpx;

			font-weight: 800;
			font-size: 30rpx;
			color: #ffffff;
			line-height: 50rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}

		&-title {
			font-weight: 500;
			font-size: 24rpx;
			color: #ffffff;
			line-height: 34rpx;
			text-align: center;
			font-style: normal;
			text-transform: none;
		}
	}

	.whiteBox {
		position: relative;

		image {
			width: 100%;
			height: 155rpx;
		}
	}

	.noData {
		text-align: center;
		background-color: #FFF;
		width: 100%;
		margin-top: -10rpx;

		image:nth-of-type(1) {
			margin-top: 80rpx;
			width: 208rpx;
			height: 243rpx;
		}

		image:nth-of-type(2) {
			width: 370rpx;
			height: 190rpx;
		}

		view:nth-of-type(1) {
			margin-top: 7rpx;
			font-weight: 500;
			font-size: 32rpx;
			color: #000000;
		}

		view:nth-of-type(2) {
			margin: 20rpx 0;
			font-weight: 500;
			font-size: 24rpx;
			color: #999999;
		}



	}

	.loginBox {
		position: absolute;
		z-index: 2;
		padding: 44rpx 0rpx 0 30rpx;
		width: 100%;

		&-left {
			text-align: center;

			&-text {
				font-weight: 800;
				font-size: 40rpx;
				color: #212121;


			}

			image {
				margin-left: 20rpx;
				width: 32rpx;
				height: 32rpx;
			}

			text {

				font-weight: 500;
				font-size: 24rpx;
				color: #666666;
			}
		}

		&-right {
			margin-right: 20rpx;
			font-weight: 500;
			font-size: 28rpx;
			color: #FB353B;
			border-radius: 77rpx;
			padding: 5rpx 25rpx;
			border: 2rpx solid #FB353B;
		}

		&-edit {
			margin-right: 50rpx;
		}
	}

	.tui-tabs {
		overflow: hidden;
		background-color: #FB353B;
		width: 100%;
	}

	.labelBox {
		font-weight: 500;
		font-size: 28rpx;
		color: #FB353B;
		padding: 20rpx 0 40rpx;
		display: flex;
		flex-wrap: wrap;

		view {
			background: #FFF1F2;
			border-radius: 79rpx;
			padding: 8rpx 20rpx;
			margin: 10rpx;
		}
	}

	.applyBox {
		padding-bottom: 45rpx;
		margin-top: -10rpx;

		&-box {
			text-align: center;

			image {
				width: 88rpx;
				height: 88rpx;
			}

			view {
				font-weight: 400;
				font-size: 28rpx;
				color: #666666;
			}
		}
	}



	.articleBox {
		width: 348rpx;
		border-radius: 16rpx;
		background-color: #eef0f1;

		&-title {
			font-weight: 400;
			font-size: 26rpx;
			color: #333333;
			padding: 20rpx;
		}

		image {
			border-radius: 16rpx 16rpx 0 0;
			width: 348rpx;
			height: 342rpx;
		}

		&-label {
			font-weight: 500;
			font-size: 20rpx;
			padding: 0 20rpx 27rpx;

			image {
				border-radius: 50%;
				width: 28rpx;
				height: 28rpx;
			}

			view:nth-of-type(1) {
				margin: 0 22rpx 0 13rpx;
				color: #666666;
			}

			view:nth-of-type(2) {
				color: #999;
			}

			&-hongxin {

				image {
					margin-right: 7rpx;
					width: 40rpx;
					height: 40rpx;
				}

				view {

					font-weight: 400;
					font-size: 26rpx;
					color: #EA3325;
				}
			}

		}
	}


	.MingPian-tips-model {
		height: 230rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		flex-direction: column;
		background: #ffffff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 2rpx solid #f4f5f6;
		padding: 36rpx 0 42rpx 0;
		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 32rpx;
		color: #333333;
		text-align: center;
		font-style: normal;
		text-transform: none;
		gap: 36rpx;
	}

	.wanS-btn {
		width: 276rpx;
		height: 72rpx;
		background: #fb353b;
		border-radius: 98rpx 98rpx 98rpx 98rpx;

		font-family: PingFang SC, PingFang SC;
		font-weight: 800;
		font-size: 32rpx;
		line-height: 72rpx;
		color: #ffffff;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.biji-container {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-direction: column;
		gap: 10rpx;
		/* flex-wrap: wrap; */
	}

	.Shoucang-box {
		background-color: #f4f5f6;
		padding: 16rpx;
		/* height: 70vh; */
		display: flex;
		/* align-items: center; */
		justify-content: flex-start;
		gap: 10rpx;
	}

	.biji-box {
		background-color: #fff;
		width: 46vw;
		background: #ffffff;
		border-radius: 16rpx;
		overflow: hidden;
		position: relative;
	}

	.play-btn {
		position: absolute;
		top: 22rpx;
		right: 22rpx;
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		z-index: 2;
		display: flex;
		align-items: center;
		justify-content: center;
		background-color: rgba(0, 0, 0, 0.1);
	}

	.LiuLanL-box {
		position: absolute;
		left: 3%;
		top: 1%;
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 2rpx;

		font-family: Roboto, Roboto;
		font-size: 28rpx;
		color: #ffffff;
		text-align: left;
		font-style: normal;
		text-transform: none;
		padding: 2rpx 10rpx;
		border-radius: 30rpx;
		background-color: rgba(0, 0, 0, 0.1);
	}

	.LiuLanL-box image {
		width: 32rpx;
		height: 32rpx;
	}

	.biji-image {
		width: 100%;
		background-color: #fff;
	}

	.biji-info {
		width: 100%;
		height: 122rpx;
		background: #ffffff;
		border-radius: 0rpx 0rpx 16rpx 16rpx;
		padding: 18rpx 16rpx;
		display: flex;
		justify-content: flex-start;
		flex-direction: column;
		gap: 18rpx;
		box-sizing: border-box;
	}

	.biji-biaoti {
		font-family: Roboto, Roboto;
		font-weight: 400;
		font-size: 28rpx;
		color: #333333;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.biji-line {
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.left-box {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 12rpx;
	}

	.left-box image {
		width: 36rpx;
		height: 36rpx;
		border-radius: 50%;
	}

	.biji-name {
		font-family: PingFang SC, PingFang SC;
		font-size: 24rpx;
		color: #666666;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.right-box {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		gap: 8rpx;

		font-family: Inter, Inter;
		font-weight: 400;
		font-size: 24rpx;
		color: #ea3325;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.right-box image {
		width: 36rpx;
		height: 30rpx;
	}

	.pinglun-container {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		flex-direction: column;
		gap: 20rpx;
		margin: 20rpx auto;
	}

	.pinglun-box {
		display: flex;
		justify-content: flex-start;
		gap: 14rpx;
		margin: auto;
	}

	.pinglun-box image {
		width: 62rpx;
		height: 62rpx;
		border-radius: 50%;
	}

	.pinglun-box .Pinglunuser-box {
		font-family: Inter, Inter;
		font-weight: 400;
		font-size: 24rpx;
		color: #000000;
		text-align: left;
		font-style: normal;
		text-transform: none;
		flex-direction: column;
		display: flex;
		justify-content: center;
		gap: 8rpx;
	}

	.pinglun-time {
		font-family: Inter, Inter;
		font-weight: 400;
		font-size: 20rpx;
		color: #999999;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-top: 8rpx;
	}

	.pinglun-NR {
		width: 572rpx;
		/* height: 108rpx; */
		/* background: #f4f5f6; */
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		/* padding: 20rpx; */
		margin-top: 6rpx;

		font-family: Inter, Inter;
		font-weight: 400;
		font-size: 24rpx;
		color: #333333;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.Rongyu-info {
		margin-top: 20rpx;
		font-family: Inter, Inter;
		font-weight: 400;
		font-size: 24rpx;
		color: #000000;
		text-align: left;
		font-style: normal;
		text-transform: none;
		margin-left: 20rpx;
	}

	.no-GongSiLogo {
		width: 352rpx;
		height: 352rpx;
		background-color: #fb353b;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		white-space: nowrap;
		font-family: PingFang SC, PingFang SC;
		font-weight: bold;
		font-size: 32rpx;
		color: #ffffff;
		text-align: center;
		font-style: normal;
		text-transform: none;
	}

	.no-img-box {
		width: 352rpx;
		height: 352rpx;
		background: #ede7fb;
		position: relative;

		display: flex;
		align-items: center;
		justify-content: center;
		text-align: center;
		padding: 20rpx;
		box-sizing: border-box;
	}

	.bottom-bgc {
		position: absolute;
		bottom: 5%;
		right: 5%;

		width: 50rpx;
		height: 20rpx;
		background-color: #dac8e9;
	}

	.zhu-box {
		width: 8rpx;
		height: 28rpx;
		background: #fb353b;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
	}

	.no-img-nr {
		width: 100%;
		height: 80rpx;
		font-family: PingFang SC, PingFang SC;
		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		text-align: center;
		font-style: normal;
		text-transform: none;

		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
		text-overflow: ellipsis;
		word-wrap: break-word;
	}

	.douhao-img {
		position: absolute;
		top: 5%;
		left: 5%;
		width: 50rpx;
	}

	.header-avatar {
		width: 60rpx;
		height: 60rpx;
		border-radius: 50%;
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
	}

	.mbti-section {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: 45%;
	}

	.mbti-char {
		font-size: 36rpx;
		font-weight: bold;
		color: #000;
		width: 36rpx;
		text-align: center;
		flex-shrink: 0;
		/* Prevent character from shrinking */
	}

	.mbti-bar-wrapper {
		flex: 1;
		display: flex;
		height: 48rpx;
		border-radius: 8rpx;
		overflow: hidden;
		background-color: #fff;
		/* White background for the middle separator */
		margin: 0 10rpx;
		position: relative;
	}

	.mbti-bar-left-fill,
	.mbti-bar-right-fill {
		height: 100%;
		background-color: #4a90e2;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #ffffff;
		font-size: 24rpx;
		font-weight: bold;
		white-space: nowrap;
		box-sizing: border-box;
		transition: width 0.3s ease-in-out;
	}

	.mbti-bar-right-fill {
		background-color: #e15151;
	}

	.left-fill {
		clip-path: polygon(0% 0%, 100% 0%, calc(100% - 10rpx) 100%, 0% 100%);
	}

	.right-fill {
		clip-path: polygon(10rpx 0%, 100% 0%, 100% 100%, 0% 100%);
	}

	.popup-info {
		height: 100vh;
		padding: 32rpx;
		width: 520rpx;
		box-sizing: border-box;
		background: #eef0f1;
		border-radius: 78rpx 0rpx 0rpx 78rpx;
		z-index: 999;
	}

	.popup-logo {
		width: 40rpx;
		height: 40rpx;
	}

	.popup-box {
		display: flex;
		align-items: center;
		justify-content: flex-start;
		background-color: #fff;
		margin-bottom: 20rpx;
		box-sizing: border-box;
		width: 456rpx;
		height: 88rpx;
		padding: 20rpx;
		background: #ffffff;
		border-radius: 16rpx 16rpx 16rpx 16rpx;
		border: 1rpx solid #f3f5f9;

		font-weight: 500;
		font-size: 28rpx;
		color: #333333;
		line-height: 33rpx;
		text-align: left;
		font-style: normal;
		text-transform: none;
	}

	.popup-box image {
		width: 36rpx;
		height: 36rpx;
		margin-right: 14rpx;
	}



	.label {

		font-weight: 500;
		font-size: 30rpx;
		color: #999999;

		.label-item {
			padding: 20rpx;
			display: inline-block;

			view {
				margin-right: 20rpx;
				text-align: center;
			}
		}

		.selected-icon {
			width: 66rpx;
			height: 6rpx;
			background: #FB353B;
			border-radius: 8rpx;
			margin: 4rpx auto 0;
		}
	}

	.masonry-container {
		height: 100vh;
		display: flex;
		padding: 10rpx;
		justify-content: space-between;
		box-sizing: border-box;
	}

	.masonry-column {
		width: calc(50% - 10rpx);
		/* 两列间距20rpx，每列占比50%减10rpx */
		display: flex;
		flex-direction: column;
		gap: 20rpx;
	}

	.masonry-item {
		background-color: #fff;
		border-radius: 16rpx;
		overflow: hidden;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
		transition: transform 0.3s ease;
	}

	.masonry-item:hover {
		// transform: translateY(-4rpx);
	}

	.eys {
		position: absolute;
		z-index: 1;
		width: 50%;
		padding: 20rpx;

		// padding-top: -30rpx;
		// background-color: #777;
		&-left {
			image {
				width: 36rpx;
				height: 36rpx;
				margin-right: 10rpx;
			}

			text {
				font-weight: 400;
				font-size: 26rpx;
				color: #FFFFFF;
			}
		}

		&-right {
			image {
				width: 46rpx;
				height: 46rpx;
				margin-right: 60rpx;
			}
		}

	}

	.media-container {
		width: 100%;
		position: relative;
	}

	.media-item {
		width: 100%;
		display: block;
	}

	.item-info {
		padding: 16rpx;
	}

	.item-title {
		font-size: 28rpx;
		color: #333;
		margin-bottom: 10rpx;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}

	.item-meta {
		display: flex;
		justify-content: space-between;
		font-weight: 500;
		font-size: 20rpx;

		&-box {
			image {
				width: 28rpx;
				height: 28rpx;
				border-radius: 50%;
			}

			view {
				color: #666666;
				margin: 0 15rpx;
			}

			text {
				color: #999999;
			}
		}

		&-aixin {
			image {
				width: 33rpx;
				height: 33rpx;
				margin-right: 10rpx;
			}

			text {
				font-weight: 400;
				font-size: 26rpx;

			}
		}
	}

	.load-more {
		padding: 30rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.loading {
		display: flex;
		align-items: center;
		gap: 10rpx;
		color: #777;
		font-size: 26rpx;
	}

	.load-more-btn {
		background-color: #f5f5f5;
		color: #666;
		border: none;
		padding: 15rpx 40rpx;
		border-radius: 30rpx;
		font-size: 26rpx;
	}

	/* 解决视频初始加载时的样式问题 */
	video {
		object-fit: cover;
	}

	.no-Data {
		width: 100%;
		height: 80vh;
		flex-direction: column;
		text-align: center;
		font-weight: 500;

		image {
			width: 208rpx;
			height: 243rpx;
			margin: 80rpx 0 10rpx;
		}

		view:nth-of-type(1) {
			font-size: 32rpx;
			color: #000000;
		}

		view:nth-of-type(2) {
			margin-top: 20rpx;
			font-size: 24rpx;
			color: #999999;
		}
	}
</style>